<!--
/**
* Author: KSJ
* Date: 2022-07-21 20:35
* Desc: 
*/
-->
<!-- by your name -->
<template>
  <view class="goods-list mb20" v-if="list.length">
    <view class="flex flex-m pl30 mb10 pr30">
      <view class="fs28 fb">观影伴侣.美味小食</view>
      <view class="flex-right fs26 more flex" @click="toMall"
        >更多<u-icon color="#ADB5B7" name="arrow-right"></u-icon
      ></view>
      <!-- v-uMEvent="'click_home_goods_more'" -->
    </view>
    <view class="fs22 mb20 fc-primary pl30">边吃边看更爽哦～</view>
    <scroll-view scroll-x>
      <view class="flex">
        <view
          class="goods-item ml30"
          v-for="(item, index) in list"
          :key="index"
          @click="clickGoods(item)"
        >
          <zm-image
            :src="item.imageUrl"
            custom-style="width:172rpx;height:172rpx;margin-right:20rpx"
          ></zm-image>
          <view class="fb fs24 ell2 mt15 mb5 ml15 mr15 onShow">{{
            item.name || '--'
          }}</view>
          <view class="flex pl15">
            <price
              :price="item.sellPrice"
              unit-size="22"
              price-size="26"
              custom-class="fb"
              color="#FFB415"
            ></price>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import ZmImage from '@/commons/ZmImage'
  import Price from '@/components/Price'
  export default {
    components: {
      ZmImage,
      Price
    },
    props: {
      list: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {}
    },
    methods: {
      //初始化方法
      // init() {},
      toMall() {
        this.$tools.navigateTo('/pages/mall/mall', {}, 'switchTab')
      },
      clickGoods(item) {
        // #ifdef MP-ALIPAY
        if (!my.canIUse('plugin') && !my.isIDE) {
          console.log('不可用', my.canIUse('plugin'), my.isIDE)
          my.ap && my.ap.updateAlipayClient && my.ap.updateAlipayClient() // 如果动态加载不可用则打开支付宝客户端升级界面
        } else {
          my.reLaunch({
            url: `plugin://groupPurchaseoucherPlugin/index?outItemId=${item.mallCommodityId}`
            // outItemId为外部商品id
          })
        }
        // #endif
        // #ifndef MP-ALIPAY
        this.$tools.navigateTo('/pages/goodDetail/index', {
          mallCommodityId: item.mallCommodityId
        })
        // #endif
      }
    }
  }
</script>
<style lang="scss" scoped>
  .goods-list {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx 0 25rpx;
    .more {
      color: #adb5b7;
    }
    .goods-item {
      width: 174rpx;
      height: 270rpx;
      background: #ffffff;
      border: 1rpx solid #eaeaea;
      border-radius: 12rpx;
      .num {
        font-size: 22rpx;
        color: #ffb415;
      }
    }
  }
</style>
